<template>
  <div class="replyList">
    <el-table :data = "tableData"
              ref="multipleTable"
              size="mini"
              stripe
              style = "width: 100%">
      <el-table-column class-name="quickReplyColumn" :label = "$t('configLazyLoad.channel.mailTip63')">
        <template scope = "scope">
          <el-checkbox @change="changeChoose" v-model="chooseArray" :label="scope.row._id" v-if="quickReply" :class="quickReply">{{''}}</el-checkbox>
          <div @click = "showDetail(scope.$index, scope.row)"
               class = "tag"
               v-if = "!scope.row.content">{{scope.row.name}} ({{scope.row.count}})</div>
          <div  :class="{detail: scope.row.content}"
                v-if = "scope.row.content">{{scope.row.content}}</div>
        </template>
      </el-table-column>
      <el-table-column :label="$t('public.operate')" width="300px">
        <template scope = "scope">
          <span class = "addReply"
                v-if = "false"
                @click = "edit('')">{{$t('configLazyLoad.channel.mailTip37')}}</span>
          <span class = "edit"
                v-if = "scope.row.content"
                @click = "edit(scope.row)">{{$t('public.edit')}}</span>
          <span class = "del"
                v-if = "scope.row.content"
                @click = "openTip(scope.row)">{{$t('public.delete')}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
  import bus from '@/store/eventBus'
  export default {
    name: 'replyTable',
    data () {
      return {
        chooseArray: [],
        isTrue: false
      }
    },
    props: {
      tableData: {
        type: Array,
        default: function () {
          return []
        }
      },
      fatherTagArr: {
        type: Array,
        default: function () {
          return []
        }
      },
      quickReply: {
        type: Boolean
      }
    },
    watch: {
      chooseArray () {
        this.$emit('updateChooseArray', this.chooseArray)
      }
    },
    methods: {
      openTip (obj) {
        let text = this.$t('configLazyLoad.channel.mailTip64', {content: obj.content})
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
        .then(() => {
          this.$emit('delReply', obj)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      showDetail (index, parentIndex) {
        this.$emit('isShowDetail', index, parentIndex.index)
      },
      edit (obj) {
        this.$emit('edit', obj)
      },
      changeChoose (val, event) {
        let chooseId = event.target.value
        let checked = val
        if (chooseId.indexOf('#') === -1) {
          // 父级
          let fatherTag = this.fatherTagArr.find((item) => {
            return item._id === chooseId
          })
          let childrens = fatherTag.childrens || []
          if (checked) {
            // 选中
            childrens.forEach((child) => {
              if (this.chooseArray.indexOf(child._id) === -1) {
                this.chooseArray.push(child._id)
              }
            })
          } else {
            // 取消选中
            childrens.forEach((child) => {
              if (this.chooseArray.indexOf(child._id) > -1) {
                this.chooseArray.splice(this.chooseArray.indexOf(child._id), 1)
              }
            })
          }
        } else {
          // 子级
          let fatherId = chooseId.split('#')[0]
          let fatherTag = this.fatherTagArr.find((item) => {
            return item._id === fatherId
          })
          let childrens = fatherTag.childrens || []
          if (checked) {
            // 选中
            let flag
            childrens.forEach((child) => {
              if (this.chooseArray.indexOf(child._id) === -1) {
                flag = true
              }
            })
            if (!flag && this.chooseArray.indexOf(fatherId) === -1) {
              this.chooseArray.push(fatherId)
            }
          } else {
            // 取消选中
            if (this.chooseArray.indexOf(fatherId) > -1) {
              this.chooseArray.splice(this.chooseArray.indexOf(fatherId), 1)
            }
          }
        }
      },
      checkFatherChoose (fatherId) {
        if (this.chooseArray.indexOf(fatherId) > -1) {
          let fatherTag = this.fatherTagArr.find((item) => {
            return item._id === fatherId
          })
          fatherTag.childrens && fatherTag.childrens.forEach((child) => {
            if (this.chooseArray.indexOf(child._id) === -1) {
              this.chooseArray.push(child._id)
            }
          })
        }
      }
    },
    mounted () {
      bus.$on('showFatherDetail', this.checkFatherChoose)
    },
    beforeDestroy () {
      bus.$off('showFatherDetail')
    }
  }
</script>
<style lang="stylus">
  @import "../../../../../assets/common.styl"
  .replyList
    table
      tr
        td
          .detail
            text-indent 2em
          .tag
          .edit
          .del
          .addReply
            cursor pointer
          .edit
          .addReply
            color $c-main
          .del
            color $c-pink
            margin-left 30px
  .quickReplyColumn
    .el-checkbox
      width 50px
      float left
</style>
